import React from 'react'
import {useState,useEffect} from 'react'
import { Decoration5, Decoration8 } from '@jiaminghi/data-view-react'
import { useTranslation } from 'react-i18next'
import { Dropdown, Space } from 'antd';
import './TopHeader.less'
import dayjs from 'dayjs';
import 'dayjs/locale/zh'
import 'dayjs/locale/en'
export default () => {
  const { t, i18n } = useTranslation()
  const { language } = i18n;
  dayjs.locale(i18n.language)
  const curdate = dayjs().format('dddd, MMMM DD, YYYY,HH:mm:ss');
  const [dates,setDates]=useState(curdate);
  const [disLang,setDisLang]=useState('中文');
  const handleChange = ({key}) => {
    i18n.changeLanguage(key);
    if(key==='zh'){
      setDisLang('中文')
    }else{
      setDisLang('英文')
    }
  };
  useEffect(()=>{
    if(language==='zh'){
      setDisLang('中文')
    }else{
      setDisLang('英文')
    }
    const intervalId = setInterval(() => {
      setDates(dayjs().format('dddd, MMMM DD, YYYY,HH:mm:ss'));
    }, 1000);
    return () => clearInterval(intervalId);
  },[language])
  const items=[{key:'zh',label:t('中文')},{key:'en',label:t('英文')}]
  return (
    <div id="top-header">
      <Decoration8 className="header-left-decoration"/>
      <Decoration5 className="header-center-decoration">
      </Decoration5>
      <Decoration8 className="header-right-decoration" reverse={true} />
      <div className="center-title">{t('数据监控平台')}</div>
      <div className='time-form'>{dates}</div>
      <div className='lang-form'>
        <Dropdown menu={{ items,onClick:handleChange }}>
            <Space>{t('当前语言')}:{t(disLang)}</Space>
        </Dropdown>
      </div>
    </div>
  )
}
